<template>
	<view>
		<view class="head">
			<view class="select">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
				<view class="sao-jiao"></view>
			</view>
			<view class="select">
				<picker :value="areaIndex" @change="areasChange" :range="areas" range-key="name">
					<view class="uni-input">{{areas[areaIndex].name}}</view>
				</picker>
				<view class="sao-jiao"></view>
			</view>
			<view class="select">
				<picker :value="salesIndex" @change="salesChange" :range="areas" range-key="name">
					<view class="uni-input">{{areas[salesIndex].name}}</view>
				</picker>
				<view class="sao-jiao"></view>
			</view>
			<view class="select">
				<picker :value="statusIndex" @change="statusChange" :range="areas" range-key="name">
					<view class="uni-input">{{areas[statusIndex].name}}</view>
				</picker>
				<view class="sao-jiao"></view>
			</view>
		</view>
		<view class="search">
			<input class="uni-input input" placeholder="输入关键词搜索" />
			<button class="mini-btn btn" type="default" size="mini">搜索</button>
			<view class="iconfont iconsousuo"></view>
		</view>
		<view class="member-list">
			<view class="list-con">
				<view class="list">
					<text>352-林笑笑</text>
					<text>顾问 kevin</text>
					<text class="status red">待评价</text>
					<view class="iconfont icongengduo"></view>
				</view>
				<view class="list">
					<text>352-林笑笑</text>
					<text>顾问 kevin</text>
					<text class="status yellow">待消费</text>
					<view class="iconfont icongengduo"></view>
				</view>
				<view class="list">
					<text>352-林笑笑</text>
					<text>顾问 kevin</text>
					<text class="status green">待签署</text>
					<view class="iconfont icongengduo"></view>
				</view>
				<view class="list">
					<text>352-林笑笑</text>
					<text>顾问 kevin</text>
					<text class="status gray">未完成</text>
					<view class="iconfont icongengduo"></view>
				</view>
				<view class="list">
					<text>352-林笑笑</text>
					<text>顾问 kevin</text>
					<text class="status">待评价</text>
					<view class="iconfont icongengduo"></view>
				</view>
				<view class="list">
					<text>352-林笑笑</text>
					<text>顾问 kevin</text>
					<text class="status">待评价</text>
					<view class="iconfont icongengduo"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				areaIndex: 0,
				salesIndex: 1,
				statusIndex: 2,
				areas: [
					{
						id: 1,
						name: '万象里面'
					},
					{
						id: 2,
						name: '电子签约'
					},
					{
						id: 3,
						name: '支付学费'
					},
					{
						id: 4,
						name: '服务评价'
					},
				],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			
		},
		methods: {
			// 日期选择
			bindDateChange(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 地区选择
			areasChange(e) {
				console.log('区域发生选择改变，携带值为', e.target.value)
				this.areaIndex = e.target.value
			},
			// 会员选择
			salesChange(e) {
				console.log('会员发生选择改变，携带值为', e.target.value)
				this.salesIndex = e.target.value
			},
			// 状态选择
			statusChange(e) {
				console.log('状态发生选择改变，携带值为', e.target.value)
				this.statusIndex = e.target.value
			}
		}
	}
</script>

<style lang="scss">
	.head {
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
		// height: 193rpx;
		background-color: #f2f2f2;
		.select {
			width: 47%;
			height: 70rpx;
			background-color: #fff;
			border-radius: 4rpx;
			line-height: 70rpx;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			position: relative;
			margin: 0 0 20rpx 0;
			.sao-jiao {
				width: 0;
				height: 0;
				border-left: 6rpx solid transparent;
				border-right: 6rpx solid transparent;
				border-top: 10rpx solid #333;
				position: absolute;
				right: 24rpx;
				bottom: 30rpx;
			}
		}
		.select:nth-child(odd) {
			margin-right: 5% !important;
		}
		.select:nth-child(1),.select:nth-child(2) {
			margin-top: 20rpx;
		}
	}
	.search {
		margin: 20rpx 30rpx;
		// width: 690rpx;
		height: 70rpx;
		background-color: #fff;
		box-shadow: 0 8rpx 68rpx 0 rgba(0, 0, 0, 0.1);
		border-radius: 4rpx;
		border: solid 2rpx #f2f2f2;
		display: flex;
		align-items: center;
		position: relative;
		.input {
			display: flex;
			flex: 1;
			padding-left: 68rpx;
		}
		.btn {
			width: 120rpx;
			height: 70rpx;
			background-color: #fedb0d;
			border-radius: 0 4rpx 4rpx 0;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
		}
		.iconsousuo {
			font-size: 36rpx;
			position: absolute;
			left: 25rpx;
			top: 12rpx;
		}
	}
	.uni-input-placeholder {
		color: #ccc;
	}
	.member-list {
		box-sizing: border-box;
		margin: 0 30rpx;
		background-color: #fff;
		box-shadow: 0 8rpx 68rpx 0 rgba(0, 0, 0, 0.1);
		border-radius: 4rpx;
		.list-con {
			padding: 0 20rpx;
			.list {
				display: flex;
				height: 118rpx;
				align-items: center;
				border-bottom: 1rpx solid #e6e6e6;
				font-family: PingFangSC-Regular;
				text:nth-child(1) {
					font-size: 30rpx;
					color: #191919;
					// padding:0 210rpx 0 10rpx;
					padding-left: 10rpx;
					display: flex;
					flex: 4;
				}
				text:nth-child(2) {
					font-size: 26rpx;
					color: #808080;
					display: flex;
					justify-content: flex-end;
					flex: 2;
					// padding-left: 50rpx;
					
				}
				.status {
					display: flex;
					flex: 1;
					justify-content: center;
					align-items: center;
					padding: 2rpx 2rpx 4rpx 2rpx;
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #808080;
					margin: 0 10rpx 0 16rpx;
				}
				.red {
					background-color: #ffede9;
					color: #f86442;
				}
				.yellow {
					background-color: #fff8cf;
					color: #ff9001;
				}
				.green {
					background-color: #ebfae0;
					color: #4eb307;
				}
				.gray {
					background-color: #f1f1f1;
					color: #9b9b9b;
				}
				.icongengduo {
					color: #808080;
					font-size: 26rpx;
				}
			}
			.list:last-child {
				border-bottom: none;
			}
		}
	}
</style>
